<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .from {
            display: flex;
            width: 300px;
            flex-direction: column;
            margin-left: 20px;
        }

        .from input {
            text-indent: 1em;
            margin-bottom: 20px;
            height: 40px;
        }
        .from span{
            font-size: 12px;
            color: red;
            margin-left: 10px;
        }
        .from span::before{
            content: "*";
        }
        table {
            margin-left: 20px;
            margin-top: 20px;
            width: 200px;
        }

        .from button {
            width: 100px;
            height: 40px;
            margin: 0 auto;
            cursor: pointer;
            background-color: aqua;
            border: none;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="from">
        <div>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div>
            <input type="number" placeholder="请输入年龄">
        </div>
        <div>
            <input type="number" placeholder="请输入身高">
        </div>
        <div>
            <input type="number" placeholder="请输入电话">
        </div>
        <button>添加</button>
    </div>
    <!-- 表格 -->
    <table border="1" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>

    <script>
        //需求：当点击添加按钮后，输入框中的数据提交到表格中
        let btn = document.querySelector(".from button")
        let inputs = document.querySelectorAll(".from input")
        let tab = document.querySelector("table")
        btn.addEventListener("click", function () {
            let tr = document.createElement("tr")
            tr.innerHTML = `
                <td>${inputs[0].value}</td>
                <td>${inputs[1].value}</td>
                <td>${inputs[2].value}</td>
                <td>${inputs[3].value}</td>
                <td class="sc">删除</td>
            `
            tab.appendChild(tr)
        })

        //点击删除后可以删除那一行
        //事件委派
        tab.addEventListener("click", function (e) {
            if (e.target.className == "sc") {
                e.target.parentNode.remove()
            }
        })


        //表单验证
        let hints = [
            {
                condition: function (input) {
                    return input.value == 0
                },
                hint: "姓名不能为空"
            },
            {
                condition: function (input) {
                    return input.value == 0
                },
                hint: "年龄需大于18岁"
            },
            {
                condition: function (input) {
                    return input.value == 0
                },
                hint: "身高需高于175"
            },
            {
                condition: function (input) {
                    return input.value == 0
                },
                hint: "电话号码为11位"
            },
        ]
        inputs.forEach((i, j) => {
            i.addEventListener("blur", function () {
                if (hints[j].condition(i)) {
                    let span = document.createElement("span")
                    span.textContent = hints[j].hint
                    if (i.nextElementSibling) {
                        return
                    }
                    i.parentNode.appendChild(span)
                    btn.disabled=true
                }else{
                    if (i.parentNode.children.length==2) {
                        i.parentNode.children[1].remove()
                    }
                    btn.disabled=false
                }
            })
        }); 
    </script>
</body>

</html>